<template>
    <view class="bar">
        <view class="bar-main"></view>
        <view class="back-but">
            <uni-icons type="left" v-if="isShowIcon" size="18" class="icon" @click="handleBack">返回</uni-icons>
            <text class="bar-text" :class="{ 'left-bar': !isShowIcon }">
                {{ title }}
            </text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'NavBar',
    props: {
        title: {
            type: String,
            default: ''
        },
        isShowIcon: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {};
    },
    methods: {
        handleBack() {
            uni.navigateBack();
        }
    }
};
</script>

<style lang="scss" scoped>
.bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 176rpx;
    background-color: #2c5e9f;
}

.bar-main {
    width: 100%;
    height: 80rpx;
}

.back-but {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
}

.icon {
    margin-left: 20rpx;
    color: #ffffff !important;
}

.bar-text {
    font-size: 36rpx;
    flex: 1;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
}

.left-bar {
    margin-left: 40rpx;
}
</style>
